<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="leftBar">
        <LeftBar/>
      </el-aside>
      <el-main>
        <router-view >
        </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import LeftBar from "@/components/LeftBar.vue";
import NoteMain from "@/components/Note/NoteMain.vue";
import {computed, ref } from "vue";
import router from "@/router";

// 监听路由交互
const animation = ref('slide');
computed(() =>{})
router.afterEach((to, form) => {
  if(to.meta.index > form.meta.index){
    animation.value = 'slide-left'
  }else{
    animation.value = 'slide-right'
  }
})
</script>

<style scoped>
.leftBar{
  /*border: 1px solid forestgreen;*/
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  margin-left: 3%;
  height: 800px;
}
</style>
